---
id: pagination
title: Pagination
---

import Playground from '@theme/Playground';

## Default

<Playground>
  <ul class="pagination">
    <li class="pagination__item disabled">
      <a class="pagination__link" href="#url">
        &laquo;
      </a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        1
      </a>
    </li>
    <li class="pagination__item pagination__item--active">
      <a class="pagination__link" href="#url">
        2
      </a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        3
      </a>
    </li>
    <li class="pagination__item">
      <span>...</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        &raquo;
      </a>
    </li>
  </ul>
</Playground>

## Small

<Playground>
  <ul class="pagination pagination--sm">
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        &laquo;
      </a>
    </li>
    <li class="pagination__item">
      <span>...</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        5
      </a>
    </li>
    <li class="pagination__item pagination__item--active">
      <a class="pagination__link" href="#url">
        6
      </a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        7
      </a>
    </li>
    <li class="pagination__item">
      <span>...</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        &raquo;
      </a>
    </li>
  </ul>
</Playground>

## Large

<Playground>
  <ul class="pagination pagination--lg">
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        &laquo;
      </a>
    </li>
    <li class="pagination__item">
      <span>...</span>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        7
      </a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" href="#url">
        8
      </a>
    </li>
    <li class="pagination__item pagination__item--active">
      <a class="pagination__link" href="#url">
        9
      </a>
    </li>
    <li class="pagination__item disabled">
      <a class="pagination__link" href="#url">
        &raquo;
      </a>
    </li>
  </ul>
</Playground>
